<template>
  <div>
    <Header/>

    <div id="main">
      <article style="padding-top: 20px;">
        <div class="lbox">
          <div class="content_box whitebg">
            <h2 class="htitle">
              <span class="con_nav">
                您现在的位置是：<router-link to="/">网站首页</router-link>&gt;<span>服务项目</span>
              </span>服务项目
            </h2>

            <h1 class="con_tilte">{{info.name}}</h1>

            <p class="bloginfo">
              <i class="avatar"><img :src="info.user.avatar" style="width: 100%; height: 100%;"></i>
              <span>{{info.user.name}}</span>
              <span>{{info.creatTime}}</span>
            </p>

            <div class="con_text">
              <el-row>
                <el-col :span="10">
                  <img :src="info.img" style="width: 100%; height: 270px!important;">
                </el-col>
                <el-col :span="14" style="padding: 0px 20px;">
                  <div>
                    <span>服务类型：{{info.servicesType.name}}</span>
                    <el-divider class="my-divider"></el-divider>
                    <span v-if="levels == null">价格：￥{{info.price}}</span>
                    <span v-if="levels != null" style="text-decoration: line-through; color: #c0c4cc">￥{{info.price}} [原价]</span>
                    <span v-if="levels != null">￥{{(info.price * levels.discount).toFixed(2)}} [会员]</span>
                    <el-divider class="my-divider"></el-divider>
                    <span>消费积分：{{info.integral}}</span>
                    <el-divider class="my-divider"></el-divider>
                    <span>服务时长：{{info.duration}}</span>
                    <el-divider class="my-divider"></el-divider>
                    <span>描述：{{info.describes}}</span>
                    <el-divider class="my-divider"></el-divider>
                    <button style="border: 0px; display: inline-block;" class="diggit" @click="showDialog">
                      预约下单
                    </button>
                  </div>
                </el-col>
              </el-row>

              <el-divider></el-divider>

              <el-row>
                <strong>
                  <span style="border-left: 2px solid #E2523A; margin-right: 10px;"></span>
                  <span style="color: #E2523A;">内容详情</span>
                </strong>
                <div v-html="info.content"></div>
              </el-row>

              <p><span class="diggit">到底咯</span></p>
            </div>
          </div>

          <div class="whitebg gbook">
            <h2 class="htitle">服务评价</h2>

            <el-form ref="formComment" :model="formComment" :rules="rulesComment" size="small" label-width="80px">
              <el-form-item label="服务态度" prop="attitude">
                <el-radio v-model="formComment.attitude" label="热情">热情</el-radio>
                <el-radio v-model="formComment.attitude" label="主动">主动</el-radio>
                <el-radio v-model="formComment.attitude" label="耐心">耐心</el-radio>
                <el-radio v-model="formComment.attitude" label="一般">一般</el-radio>
                <el-radio v-model="formComment.attitude" label="恶劣">恶劣</el-radio>
              </el-form-item>
              <el-form-item label="专业技能" prop="skills">
                <el-radio v-model="formComment.skills" label="精通">精通</el-radio>
                <el-radio v-model="formComment.skills" label="熟练">熟练</el-radio>
                <el-radio v-model="formComment.skills" label="还行">还行</el-radio>
                <el-radio v-model="formComment.skills" label="一般">一般</el-radio>
                <el-radio v-model="formComment.skills" label="差劲">差劲</el-radio>
              </el-form-item>
              <el-form-item label="工作效率" prop="working">
                <el-radio v-model="formComment.working" label="高效">高效</el-radio>
                <el-radio v-model="formComment.working" label="还行">还行</el-radio>
                <el-radio v-model="formComment.working" label="一般">一般</el-radio>
                <el-radio v-model="formComment.working" label="差劲">差劲</el-radio>
              </el-form-item>
              <el-form-item label="评价内容" prop="content">
                <el-input type="textarea" :rows="3" v-model="formComment.content" placeholder="请输入评价内容"
                          clearable/>
              </el-form-item>
              <el-form-item size="large">
                <el-button type="primary" size="small" @click="addComment">确 定</el-button>
              </el-form-item>
            </el-form>

            <ul>
              <li v-for="item in commentList" :key="item.id" style="margin-bottom: 10px;">
                <el-row>
                  <el-col :span="2">
                    <img :src="item.user.avatar" style="width: 50px; height: 50px; border-radius: 50%;">
                  </el-col>
                  <el-col :span="22">
                    <p>{{item.user.name}} - [{{item.creatTime}}]</p>
                    <p style="color: #8c8989;">服务态度：{{item.attitude}}</p>
                    <p style="color: #8c8989;">专业技能：{{item.skills}}</p>
                    <p style="color: #8c8989;">工作效率：{{item.working}}</p>
                    <p style="color: #8c8989;">评价内容：{{item.content}}</p>
                  </el-col>
                </el-row>
              </li>
            </ul>

            <el-pagination
              v-show="total > 0"
              background
              class="pagination-container"
              @current-change="handleCurrentChange"
              :current-page="queryParams.page"
              :page-size="queryParams.limit"
              :page-sizes="[10, 20, 30, 50]"
              layout="prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
        </div>

        <Right/>
      </article>
    </div>

    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
        <el-form-item label="预约日期" prop="appointmentDate">
          <el-date-picker clearable
                          v-model="form.appointmentDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择预约日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="预约事项" prop="matter">
          <el-input v-model="form.matter" placeholder="请输入预约事项" clearable/>
        </el-form-item>
        <el-form-item label="具体描述" prop="describes">
          <el-input v-model="form.describes"  placeholder="请输入具体描述" clearable/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="addAppointment">确 定</el-button>
        <el-button size="small" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <Footer/>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { detailsGetServices } from '@/api/services'
  import { dataServicesComment, addServicesComment } from '@/api/servicesComment'
  import { addAppointment } from '@/api/appointment'
  import { getLevels } from '@/api/levels'
  import { getUser } from '@/api/user'
  import Header from '../common/Header.vue'
  import Footer from '../common/Footer.vue'
  import Right from '../common/Right.vue'

  export default {
    components: {
      Header,
      Footer,
      Right
    },
    computed: {
      ...mapGetters([
        'userId'
      ])
    },
    data() {
      // 表单数据空值效验
      const validateData = (rule, value, callback) => {
        if (value == null || value.length == 0) {
          callback(new Error('必填项不能为空'))
        } else {
          callback()
        }
      }
      // 表单数据数字效验
      const validateNumberData = (rule, value, callback) => {
        if (value == null || value.length == 0) {
          callback(new Error('必填项不能为空'))
        } else {
          if (Number.isInteger(value)) {
            callback()
          } else {
            callback(new Error('请输入数字'))
          }
        }
      }
      return {
        levels: null,
        info: {},
        open: false,
        title: '',
        commentList: [],
        total: null,
        queryParams: {
          page: 1,
          limit: 10,
          servicesId: null,
        },
        form: {},
        formComment: {},
        rules: {
          appointmentDate: [{ required: true, trigger: 'blur', validator: validateData }],
          matter: [{ required: true, trigger: 'blur', validator: validateData }],
          describes: [{ required: true, trigger: 'blur', validator: validateData }],
        },
        rulesComment: {
          attitude: [{ required: true, trigger: 'blur', validator: validateData }],
          skills: [{ required: true, trigger: 'blur', validator: validateData }],
          working: [{ required: true, trigger: 'blur', validator: validateData }],
          content: [{ required: true, trigger: 'blur', validator: validateData }],
        }
      }
    },
    watch: {
      '$route' (to, from) {
        if (to.name == 'services-details') {
          this.queryParams.servicesId = to.params.id
          this.detailsGetServices(to.params.id)
          this.dataServicesComment()
          this.getLevels()
        }
      }
    },
    created() {
      this.queryParams.servicesId = this.$route.params.id
      this.detailsGetServices(this.$route.params.id)
      this.dataServicesComment()
      this.getLevels()
    },
    methods: {
      getLevels() {
        getUser(this.userId).then(response => {
          if (response.data.levelsId != null) {
            getLevels(response.data.levelsId).then(response => {
              this.levels = response.data
            })
          }
        })
      },
      // 查询评论数据
      dataServicesComment() {
        this.queryParams.servicesId = this.$route.params.id
        dataServicesComment(this.queryParams).then(response => {
          this.commentList = response.data
          this.total = response.count
        });
      },
      // 评论
      addComment() {
        this.$refs["formComment"].validate(valid => {
          if (valid) {
            this.formComment.userId = this.userId
            this.formComment.servicesId = this.info.id
            addServicesComment(this.formComment).then(response => {
              this.formComment = {}
              this.$message.success('评价成功')
              this.dataServicesComment()
            });
          }
        });
      },
      handleCurrentChange(val) {
        this.queryParams.page = val
        this.dataServicesComment()
      },
      showDialog() {
        this.open = true
        this.title = "预约下单"
      },
      cancel() {
        this.open = false;
      },
      addAppointment() {
        this.form.servicesId = this.info.id
        this.form.userId = this.userId
        this.form.staffId = this.info.userId
        this.form.money = this.info.price
        if (this.levels != null) {
          this.form.money = this.form.money * this.levels.discount
          this.form.money = this.form.money.toFixed(2)
        }
        addAppointment(this.form).then(response => {
          this.form = {}
          this.open = false;
          this.$message.success('提交成功')
        })
      },
      detailsGetServices(id) {
        this.loading = true
        detailsGetServices(id).then(response => {
          this.info = response.data
          this.loading = false
        })
      },
    }
  }
</script>
